<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="./css/nodejs.css" rel="stylesheet" />
</head>
<body>
	<jsp:include page="head.jsp"></jsp:include>
	<div class="main">
		<div class="main-left">
			<div class="list-left">
				<div class="list-left-head">
					<ul class="list-left-menu">
						<li><a href="/blog" <c:if test="${sortId==null}">class="active"</c:if> >全部</a></li>
						<c:forEach items="${sorts}" var="sort">
							<li><a <c:if test="${sortId==sort.id}">class="active"</c:if> href="/search_sort?id=${sort.id}" >${sort.sort}</a></li>
						</c:forEach>
					</ul>
				</div>
				<div class="list-left-contents">
					<c:forEach items="${blogs}" var="blog">
					<div class="list-left-content">
						<div class="auth-img">
							<a href="#"><img src="${blog.headImg}"></a>
						</div>
						<div class="num">
							<span>${blog.replies}</span>/<span>${blog.clicks}</span>
						</div>
						<div class="top">
							<span>${blog.sort}</span>
						</div>
						<div class="title">
							<c:choose>
							<c:when test="${fn:length(blog.title)>23}">
								<a href="/show?id=${blog.id}">${blog.title.substring(0,23)}...</a>
							</c:when>
							<c:otherwise>
								<a href="/show?id=${blog.id}">${blog.title}</a>
							</c:otherwise>
							</c:choose>
							
						</div>
						<div class="time">
							<span class="auth-img"> <img src="${blog.commentHeadImg}">
							</span> <span class="hour">${blog.commentEndTime}</span>
						</div>
					</div>
					</c:forEach>
				</div>
				<div class="list-left-footer">
					<div class="first-page">
						<a href="#">«</a>
					</div>
					<div class="other-page">
						<a class="active" href="#">1</a>
					</div>
					<div class="other-page">
						<a href="#">2</a>
					</div>
					<div class="last-page">
						<a href="#">»</a>
					</div>
				</div>
			</div>
		</div>
		<div class="main-right">
			<div class="list-right">
				<div class="login">
					<div class="login-title">双体天翊博客中文社区 
						<c:if test="${user!=null}">
						<div class="loginout" ><a href="/loginout">退出</a></div>
						</c:if>
					</div>
					<div class="regist">
						<c:choose>
						<c:when test="${user!=null}">
							欢迎：${user.nikeName}
						</c:when>
						<c:otherwise>
							你可以 <a href="#">注册</a>
						</c:otherwise>
						</c:choose>
					</div>
					<div class="goto-login">
						<c:if test="${user!=null}">
							<a class="button" href="/write">写文章</a>
						</c:if>
					</div>
					<div class="goto-login">
						<c:choose>
						<c:when test="${user!=null}">
							<a class="button" href="#">个人中心</a>
						</c:when>
						<c:otherwise>
							<a class="button" href="./login.jsp">请点击登录</a>
						</c:otherwise>
						</c:choose>
					</div>
				</div>
				<div class="ad">
					<img class="ad-img" src="./img/ad/Fn4D6BhOTz1IswvmzeZ1q7QW1ls_.jpg" />
					<img class="ad-img" src="./img/ad/FgQS-GQDfqwAD_v0NuhyYUOUk5MG.jpg" />
					<img class="ad-img" src="./img/ad/Fu6b5DIbI_Va2i5oFjIByRGizFuP.jpg" />
					<img class="ad-img" src="./img/ad/Fv9R31Y6ySKKJi95ldk9TRkJ7o5O.jpg" />
					<img class="ad-img" src="./img/ad/Fq72q-0Z18wsDDuHAHsUik1PlIeK.jpg" />
				</div>
				<div class="hot-blog">
					<div class="hot-title">热门文章</div>
					<div class="hot-contents">
						<div class="hot-content"><a href="#">关于cnode API 有一个问题 请教</a></div>
						<div class="hot-content"><a href="#">express+mongodb，两个数据模型关联的</a></div>
						<div class="hot-content"><a href="#">阿里云优惠券免费大放送了！！！，需要购买的抓紧机会！！！</a></div>
						<div class="hot-content"><a href="#">关于回调的问题</a></div>
						<div class="hot-content"><a href="#">Node.js进阶：cluster模块深入剖析</a></div>
					</div>
				</div>
				<div class="friendly">
					<div class="hot-title">友情社区</div>
					<div class="hot-contents">
						<div class="hot-content"><a href="#"><img src="./img/friendly/FjLUc7IJ2--DqS706etPQ1EGajxK.jpg"/></a></div>
						<div class="hot-content"><a href="#"><img src="./img/friendly/golangtc-logo.png"/></a></div>
						<div class="hot-content"><a href="#"><img src="./img/friendly/phphub-logo.png"/></a></div>
						<div class="hot-content"><a href="#"><img src="./img/friendly/ruby-china-20150529.png"/></a></div>
					</div>
				</div>
				<div class="qr-code">
					<div class="hot-title">扫描关注双体系</div>
					<div class="hot-contents">
						<div class="hot-content"><img src="./img/qr/generate.gif"/></div>
						<div class="hot-footer">双体系公众号</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<jsp:include page="footer.jsp"></jsp:include>
</body>
</html>